<template>
  <div class="form-group">
    <label>选择科目：</label>
    <select :value="modelValue" @change="updateValue">
      <option value="">请选择科目</option>
      <option v-for="subject in subjects" :key="subject" :value="subject">
        {{ subject }}
      </option>
    </select>
  </div>
</template>

<script>
import { onMounted } from 'vue'
import { useConfig } from '../../composables/useConfig.js'

export default {
  name: 'SubjectSelector',
  props: {
    modelValue: {
      type: String,
      default: ''
    }
  },
  emits: ['update:modelValue', 'change'],
  setup() {
    const { subjects, loadConfig } = useConfig()

    // 组件挂载时加载配置
    onMounted(async () => {
      try {
        await loadConfig()
      } catch (error) {
        console.warn('科目选择器配置加载失败:', error)
      }
    })

    return {
      subjects
    }
  },
  methods: {
    updateValue(event) {
      this.$emit('update:modelValue', event.target.value)
      this.$emit('change')
    }
  }
}
</script>

<style scoped>
.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  font-weight: 600;
  color: #2d3748;
  margin-bottom: 0.5rem;
}

.form-group select {
  width: 100%;
  padding: 0.75rem;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.3s;
}

.form-group select:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
</style>